<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>


  <!-- 为什么ref要用基本类型,会返回的是对象 -->
  <!-- 响应式,数据改变,页面重新渲染,js无法监控基本类型的数据 ,可以监控对象属性的变化
  将基本数据类型变成对象某个属性的值
  -->
  <script >
    // 为什么ref 是基本类型,reactive是对象或者数组
    let obj = { name: "张胜男" }
    let pp = new Proxy(obj, {
      get (target, prop) {
        // return target[prop]
        return Reflect.get (target, prop)
      },
      set (target, prop, val) {
        console.log(target, prop, val);
        // target[prop] = val
        Reflect.set(target, prop, val);
      }
    })
    console.log(pp.name);
    pp.name = "333"
    console.log(pp);

  </script>
</body>

</html>